<template>
  <view class="c" v-if="isLoaded">
    <view class="edit-c" v-if="addressList.length > 0">
      <view
        class="address-c"
        v-for="(address, index) in addressList"
        :key="index"
      >
        <view class="address-top">
          <view class="l">
            <!-- address.FPrCityArea + " " +  -->
            <view class="a">{{
              address.FPrCityArea + " " + address.FAddress
            }}</view>
            <view class="u">
              <view class="n">{{ address.FConsignee }}</view>
              <view class="p">{{ address.FPhone }}</view>
            </view>
          </view>
        </view>
        <view class="address-btm">
          <view
            class="l d"
            style="display: flex; align-items: center"
            v-if="address.FDefault == `1`"
            ><image src="/static/images/icon-select.png" /> 已为默认
          </view>
          <view
            class="l nd"
            style="display: flex; align-items: center"
            v-else
            v-on:tap="onSD(address)"
            ><image src="/static/images/noSelect.png" />
            设为默认
          </view>
          <view class="r">
            <uni-icons
              type="trash"
              size="30"
              style="margin-right: 5px"
              v-on:tap="DelAddress(address)"
            />
            <u-icon name="edit-pen" size="30" v-on:tap="editAddress(address)" />
          </view>
        </view>
      </view>
    </view>
    <view class="add-c">
      <view class="btn-add" v-on:tap="newAddress">新增地址</view>
    </view>
  </view>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api";
import { reqPost } from "../../../common/http.request";
import {
  uModal,
  uNavigateBack,
  uNavigateTo,
  uSwitchTab,
  uToast,
} from "../../../utils/uniUtils";
import { useUser } from "../../../store/useUser";

export default {
  async onShow() {
    try {
      if (useUser().hasLogin) {
        await this.GetAddressList();
        this.isLoaded = true;
      } else {
        uToast("请登录~", "error");
        setTimeout(() => {
          uSwitchTab("/pages/tab_bar/my");
        }, 1500);
      }
    } catch (error) {
      this.isLoaded = !true;
      console.log("error", error);
      uToast("初始化失败~", "error");
      setTimeout(() => {
        uNavigateBack();
      }, 1500);
    }
  },

  setup(props) {
    /*     onMounted(async function () {
      try {
        if (!useUser().hasLogin) {
          uToast("您还未登录~", "error");
          setTimeout(() => {
            uSwitchTab("/pages/tab_bar/my");
          }, 1500);

          return;
        }

        await GetAddressList();
        isLoaded.value = true;
      } catch (error) {
        isLoaded.value = !true;
        console.log("error", error);
        uToast("初始化失败~", "error");
        setTimeout(() => {
          uNavigateBack();
        }, 1500);
      }
    }); */

    const addressList = ref([]);
    const isLoaded = ref(false);

    function newAddress() {
      uNavigateTo("/pages/user/newAddress/newAddress");
    }

    async function GetAddressList() {
      addressList.value = (await reqPost("GetAddressList")).Data;
    }

    async function DelAddress(address) {
      if (address.FDefault=='1') {
        return uToast("默认地址不允许删除","none")
      }
      if (await uModal("确定要删除吗？")) {
        let res = (
          await reqPost("DelAddress", {
            id: address.FItemID,
          })
        ).Data;
        if (res) {
          await GetAddressList();
          uToast("删除成功！");
        } else {
          uToast("删除失败！", "error");
        }
      }
    }

    function editAddress(address) {
      uNavigateTo("/pages/user/newAddress/newAddress?id=" + address.FItemID);
    }

    async function onSD(address) {
      await reqPost("SetDefaultAddress", {
        id: address.FItemID,
      });
      await GetAddressList();
    }

    return {
      addressList,
      GetAddressList,
      newAddress,
      isLoaded,
      DelAddress,
      editAddress,
      onSD,
    };
  },
};
</script>

<style lang="scss" scoped>
.c {
  .edit-c {
    .address-c {
      background-color: #fff;
      margin-top: 14px;
      margin-left: 8px;
      margin-right: 8px;
      border-radius: 8px;
      .address-top {
        padding: 14px;
      }

      .address-btm {
        border-top: 1px solid #e5e5e5;
        padding: 8px 14px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        .d {
          color: #e54e45;
        }
        .nd {
          color: #9c9d9e;
        }
      }

      .l {
        image {
          width: 18px;
          height: 18px;
          margin-right: 3px;
        }
        .a {
        }
        .u {
          display: flex;
          margin-top: 10px;
          color: #aaaaaa;
          .n {
            font-size: 15px;
          }
          .p {
            margin-left: 20px;
            font-size: 14px;
          }
        }
      }
      .r {
        display: flex;
        align-items: center;
      }
    }
  }
  .add-c {
    display: flex;
    justify-content: center;
    .btn-add {
      background-color: #ff2838;
      color: #fff;
      margin-top: 30px;
      width: 80%;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>
